// 支付密码输入框组件
import 'package:flutter/material.dart';

class PasswordKeyBordInput extends StatefulWidget {
  const PasswordKeyBordInput({super.key});

  @override
  State<PasswordKeyBordInput> createState() => _PasswordKeyBordInputState();
}

class _PasswordKeyBordInputState extends State<PasswordKeyBordInput> {
  final List<String> _password = List.filled(6, '', growable: false);
  int _passwordIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 密码显示区域
        Container(
          height: 50,
          width: 240,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: Colors.grey.shade300),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(6, (index) {
              return Container(
                width: 16,
                height: 16,
                decoration: BoxDecoration(
                  color: _password[index].isNotEmpty ? Colors.black : Colors.transparent,
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.grey.shade300,
                  ),
                ),
              );
            }),
          ),
        ),

        const SizedBox(height: 20),

        // 数字键盘
        SizedBox(
          width: 240,
          child: GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 1.5,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
            ),
            itemCount: 12,
            itemBuilder: (context, index) {
              if (index == 9) {
                // 空白占位符
                return const SizedBox();
              } else if (index == 10) {
                // 0按钮
                return _buildNumberButton('0', 0);
              } else if (index == 11) {
                // 删除按钮
                return _buildDeleteButton();
              } else {
                // 数字按钮 1-9
                return _buildNumberButton('${index + 1}', index + 1);
              }
            },
          ),
        ),
      ],
    );
  }

  // 构建数字按钮
  Widget _buildNumberButton(String number, int value) {
    return TextButton(
      onPressed: () {
        if (_passwordIndex < 6) {
          setState(() {
            _password[_passwordIndex] = number;
            _passwordIndex++;
          });
        }
      },
      style: TextButton.styleFrom(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
          side: BorderSide(color: Colors.grey.shade300),
        ),
      ),
      child: Text(
        number,
        style: const TextStyle(
          fontSize: 20,
          color: Colors.black,
        ),
      ),
    );
  }

  // 构建删除按钮
  Widget _buildDeleteButton() {
    return TextButton(
      onPressed: () {
        if (_passwordIndex > 0) {
          setState(() {
            _passwordIndex--;
            _password[_passwordIndex] = '';
          });
        }
      },
      style: TextButton.styleFrom(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
          side: BorderSide(color: Colors.grey.shade300),
        ),
      ),
      child: const Icon(
        Icons.backspace,
        color: Colors.black,
      ),
    );
  }
}
// ... existing code ...
